<template>
  <view class="detail-container">
    <!-- Image Swiper -->
    <swiper class="swiper">
      <swiper-item>
        <image :src="imgurl+detail.imgUrl" mode="aspectFill" class="swiper-image"/>
      </swiper-item>
	  <!-- <image :src="imgurl+detail.imgUrl" mode="aspectFill" class="swiper-image"/> -->
    </swiper>
    
    <!-- Basic Info -->
    <view class="info-section">
      <view class="host-info">
        <text>{{detail.title}}</text>
      </view>
      <view class="stats">
        <text :class="['rental-status', detail.status ? 'available' : 'rented']">出租状态: {{detail.status==1 ? '可租' : '已租'}}</text>
		<text class="listing-area">面积:{{detail.area}}㎡</text>
        <text>房间数: {{detail.roomNum}}间</text>
      </view>
    </view>
    <!-- Description Section with Parser -->
        <view class="description-section">
          <text class="section-title">房源描述</text>
          <scroll-view 
            scroll-y 
            class="description-wrapper"
            :show-scrollbar="false"
          >
            <!-- <rich-text
              :nodes="replaceImage(detail.description)" 
            /> -->
			<mp-html :content="detail.description"/>
          </scroll-view>
        </view>
        
    <!-- Location -->
    <view class="location-section">
      <text class="section-title">位置</text>
      <map 
	    @tap="markertap"
        :latitude="detail.lat"
        :longitude="detail.lng"
        :markers="markers"
        class="map"
      ></map>
    </view>
    
    <!-- Bottom Bar -->
    <view class="bottom-bar">
      <button @tap="showDatePicker" type="primary">电话预订</button>
    </view>
  </view>
</template>

<script>
	import config from '../../config';
	import {getHouses,getRentalAdministratorByIsadmin} from '@/api/homestay.js'
	import locationImg from '@/static/img/location.png'
export default {
  data() {
    return {
      detail: {
        imgUrl: '',//图片地址
        title: '',//标题
        address: '',//地址
        area: 0,//面积
        rent: 0,//租金
        roomNum: 0,//房间数
        status: '',//出租状态
        description: '',//描述
        lat: '',//纬度
        lng: '',//经度
      },
      markers: [],
	  dingweiImg:locationImg,
	  imgurl: config.staticUrl,
	  adminphone:[],
    }
  },
  onLoad(options) {
    this.fetchDetail(options.id)
	this.getRentalAdmin()
  },
  methods: {
    fetchDetail(id) {
      getHouses(id).then(res => {
		  // console.log("getHouses",res)
      	if (res.code == 200) {
      		this.detail = res.data
			this.detail.description = this.formatRichText(this.detail.description)
			// console.log("detail:",this.detail.description)
      		this.setupMarkers(this.detail)
      	}
      });
    },
    setupMarkers(detail) {
		// console.log("========",detail)
      this.markers = [{
        id: 1,
        latitude: parseFloat(detail.lat),
        longitude: parseFloat(detail.lng),
        title: detail.title,
		iconPath: this.dingweiImg,
		width: 20, // 实际单位根据需要设置
		height: 20 // 实际单位根据需要设置
      }]
    },
	markertap(e){
		// console.log("map:",e.detail)
		const { markerId, latitude, longitude ,title} = e.detail;
		uni.openLocation({
		  latitude: latitude,
		  longitude: longitude,
		  title: title,
		  success: () => {
		    console.log('打开导航成功')
		  }
		})
	},
	getRentalAdmin(){
		getRentalAdministratorByIsadmin('1').then(res => {
				  if (res.code == 200) {
					res.data.forEach(item => {
						this.adminphone.push(item.phone);
					})
				  }
				  // console.log("that.departments",that.departments)
		});
	},
    showDatePicker() {
      let stringPhones = this.adminphone.map(number => number.toString());
      uni.showActionSheet({
        itemList: stringPhones,
        success: (res) => {
          if (res.tapIndex !== undefined) {
            const selectedPhoneNumber = stringPhones[res.tapIndex];
            this.makePhoneCall(selectedPhoneNumber);
          }
        },
        fail: (err) => {
          console.error("显示操作表失败:", err);
        },
      });
    },
	makePhoneCall(phoneNumber) {
	  uni.makePhoneCall({
	    phoneNumber: phoneNumber,
	    success: () => {
	      console.log(`成功拨打 ${phoneNumber}`);
	    },
	    fail: (err) => {
	      console.error(`拨打 ${phoneNumber} 失败:`, err);
	    },
	  });
	},
	formatRichText(html) {
		// console.log("content:",html)
		//控制小程序中图片大小
		let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
			match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
			match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
			match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
			return match;
		});
		newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
			match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
				'max-width:100%;');
			return match;
		});
		newContent = newContent.replace(/<br[^>]*\/>/gi, '');
		//线上运行
		newContent = newContent.replace(/\<img src="\/prod-api/gi,
			'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;" src="'+config.staticUrl);
		//本地运行
		// newContent = newContent.replace(/\<img src="\/dev-api/gi,
		// 		'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;" src="'+config.staticUrl);
			// '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
		return newContent;
	},
	   
  }
}
</script>

<style lang="scss">
.detail-container {
  // padding-bottom: 100rpx;
  
  .swiper {
    width: 100%;
	height:455rpx;
    
    .swiper-image {
      width: 100%;
      height: 100%;
	  position: absolute;
	  transform: translate(0%, 0px) translateZ(0px);
    }
  }
  .info-section {
	height: 120rpx;
    padding: 30rpx;
    background: #fff;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
    }
    
    .host-info {
      display: flex;
      align-items: center;
      margin: 20rpx 0;
    }
    
    .stats {
      display: flex;
      gap: 20rpx;
      
      text {
        background: #f5f5f5;
        padding: 10rpx 20rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
      }
    }
  }
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  
  .amenities-section {
    padding: 30rpx;
    background: #fff;
    margin-top: 20rpx;
    
    .amenities-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20rpx;
      
      .amenity-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        text {
          font-size: 24rpx;
          margin-top: 10rpx;
        }
      }
    }
  }
  
  .description-section {
      background: #fff;
      margin: 20rpx;
      border-radius: 12rpx;
      padding: 30rpx;
      
      .description-wrapper {
        max-height: calc(100vh - 500rpx); // 根据实际布局调整
        overflow-y: auto;
      }
    }
  
  .location-section {
    padding: 30rpx;
    background: #fff;
    margin-top: 20rpx;
    
    .map {
      height: 400rpx;
      width: 100%;
    }
  }
  
  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    background: #fff;
    border-top: 1rpx solid #eee;
    
    .price {
      .amount {
        font-size: 36rpx;
        font-weight: bold;
        color: #ff4d4f;
      }
    }
    
    button {
      width: 240rpx;
    }
  }
  
  .date-picker {
    background: #fff;
    padding: 30rpx;
    
    .picker-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
    }
  }
}

.rental-status {
          text-align: center;
          padding: 8rpx 0;
          border-radius: 6rpx;
          font-size: 26rpx;
          font-weight: 500;
          
          &.available {
            background: #e6f7ff;
            color: #1890ff;
            border: 1rpx solid #91d5ff;
          }
          
          &.rented {
            background: #fff1f0;
            color: #ff4d4f;
            border: 1rpx solid #ffa39e;
          }
        }
</style>